<template>
  <div class="admin-layout">
    <!-- 顶部导航 -->
    <el-header class="admin-header">
      <div class="header-content">
        <div class="header-left">
          <div class="logo-container">
            <div class="logo-icon">
              <el-icon><Platform /></el-icon>
            </div>
            <div class="logo-text">
              <h1 class="logo-title">LetHear</h1>
              <span class="logo-subtitle">管理控制台</span>
            </div>
          </div>
        </div>
        <div class="header-center">
          <div class="breadcrumb-container">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                <el-icon><House /></el-icon>
                管理后台
              </el-breadcrumb-item>
              <el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
        <div class="header-right">
          <div class="header-actions">
            <el-dropdown @command="handleCommand" class="user-dropdown">
              <div class="user-info">
                <el-avatar :src="user?.avatar" :size="36" class="user-avatar">
                  {{ user?.username?.charAt(0) }}
                </el-avatar>
                <div class="user-details">
                  <span class="username">{{ user?.username }}</span>
                  <span class="user-role">系统管理员</span>
                </div>
                <el-icon class="dropdown-icon">
                  <ArrowDown />
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu class="user-dropdown-menu">
                  <el-dropdown-item command="profile" class="dropdown-item">
                    <el-icon><User /></el-icon>
                    <span>个人资料</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="front" class="dropdown-item">
                    <el-icon><House /></el-icon>
                    <span>返回前台</span>
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout" class="dropdown-item logout">
                    <el-icon><SwitchButton /></el-icon>
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </el-header>

    <el-container class="admin-main">
      <!-- 侧边栏 -->
      <el-aside class="admin-sidebar" width="280px">
        <div class="sidebar-content">
          <!-- 菜单标题 -->
          <div class="menu-header">
            <div class="menu-title">
              <el-icon><Management /></el-icon>
              <span>管理功能</span>
            </div>
          </div>

          <!-- 主菜单 -->
          <div class="menu-section">
            <el-menu
              :default-active="activeMenu"
              class="admin-menu"
              router
              background-color="transparent"
              text-color="#8c8c8c"
              active-text-color="#1890ff"
            >
              <el-menu-item index="/admin" class="menu-item">
                <div class="menu-item-content">
                  <div class="menu-icon dashboard">
                    <el-icon><Odometer /></el-icon>
                  </div>
                  <span class="menu-text">仪表板</span>
                  <div class="menu-indicator"></div>
                </div>
              </el-menu-item>

              <el-menu-item index="/admin/reports" class="menu-item">
                <div class="menu-item-content">
                  <div class="menu-icon reports">
                    <el-icon><Flag /></el-icon>
                  </div>
                  <span class="menu-text">举报管理</span>
                  <div class="menu-indicator"></div>
                </div>
              </el-menu-item>

              <el-menu-item index="/admin/posts" class="menu-item">
                <div class="menu-item-content">
                  <div class="menu-icon posts">
                    <el-icon><Document /></el-icon>
                  </div>
                  <span class="menu-text">帖子管理</span>
                  <div class="menu-indicator"></div>
                </div>
              </el-menu-item>

              <el-menu-item index="/admin/users" class="menu-item">
                <div class="menu-item-content">
                  <div class="menu-icon users">
                    <el-icon><UserFilled /></el-icon>
                  </div>
                  <span class="menu-text">用户管理</span>
                  <div class="menu-indicator"></div>
                </div>
              </el-menu-item>

              <el-menu-item index="/admin/categories" class="menu-item">
                <div class="menu-item-content">
                  <div class="menu-icon categories">
                    <el-icon><Folder /></el-icon>
                  </div>
                  <span class="menu-text">分类管理</span>
                  <div class="menu-indicator"></div>
                </div>
              </el-menu-item>
            </el-menu>
          </div>

          <!-- 底部信息 -->
          <div class="sidebar-footer">
            <div class="system-info">
              <div class="info-item">
                <span class="info-label">在线用户</span>
                <span class="info-value">{{ onlineUsers }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">系统状态</span>
                <span class="info-status online">运行中</span>
              </div>
            </div>
          </div>
        </div>
      </el-aside>

      <!-- 主要内容区域 -->
      <el-main class="admin-content">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  ArrowDown,
  User,
  House,
  SwitchButton,
  Odometer,
  Flag,
  Document,
  UserFilled,
  Platform,
  Management,
  Folder,
} from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();
const store = useStore();

// 响应式数据
const onlineUsers = ref(95);

// 计算属性
const user = computed(() => store.getters["auth/user"]);
const activeMenu = computed(() => route.path);
const currentPageTitle = computed(() => {
  const path = route.path;
  const titleMap: Record<string, string> = {
    "/admin": "仪表板",
    "/admin/reports": "举报管理",
    "/admin/posts": "帖子管理",
    "/admin/users": "用户管理",
    "/admin/categories": "分类管理",
  };
  return titleMap[path] || "管理后台";
});

// 处理用户菜单命令
const handleCommand = async (command: string) => {
  switch (command) {
    case "profile":
      router.push("/profile");
      break;
    case "front":
      router.push("/");
      break;
    case "logout":
      await handleLogout();
      break;
  }
};

// 处理退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm("确定要退出登录吗？", "退出确认", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    await store.dispatch("auth/logout");
    ElMessage.success("已退出登录");
    router.push("/");
  } catch (error) {
    if (error !== "cancel") {
      console.error("Logout error:", error);
    }
  }
};

// 组件挂载
onMounted(() => {
  // 管理后台初始化
});
</script>

<style scoped lang="scss">
.admin-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .admin-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-bottom: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 0;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    }

    .header-content {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 32px;
      max-width: none;

      .header-left {
        display: flex;
        align-items: center;
        min-width: 200px;

        .logo-container {
          display: flex;
          align-items: center;
          gap: 12px;

          .logo-icon {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
            flex-shrink: 0;

            .el-icon {
              font-size: 20px;
              color: white;
            }
          }

          .logo-text {
            display: flex;
            flex-direction: column;
            gap: 1px;

            .logo-title {
              margin: 0;
              font-size: 20px;
              font-weight: 700;
              color: white;
              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
              line-height: 1.2;
              white-space: nowrap;
            }

            .logo-subtitle {
              font-size: 12px;
              color: rgba(255, 255, 255, 0.8);
              line-height: 1.2;
              white-space: nowrap;
            }
          }
        }
      }

      .header-center {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        .breadcrumb-container {
          background: rgba(255, 255, 255, 0.1);
          padding: 10px 20px;
          border-radius: 20px;
          backdrop-filter: blur(10px);
          min-height: 40px;
          display: flex;
          align-items: center;

          :deep(.el-breadcrumb) {
            line-height: 1.5;
          }

          :deep(.el-breadcrumb__inner) {
            color: white !important;
            font-weight: 500;
            font-size: 14px;
            line-height: 1.5;
          }

          :deep(.el-breadcrumb__separator) {
            color: rgba(255, 255, 255, 0.6) !important;
            margin: 0 8px;
          }

          :deep(.el-breadcrumb__item) {
            display: flex;
            align-items: center;
            gap: 6px;
          }
        }
      }

      .header-right {
        display: flex;
        align-items: center;
        min-width: 250px;
        justify-content: flex-end;

        .header-actions {
          display: flex;
          align-items: center;
          gap: 16px;
          height: 100%;

          .action-button {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            backdrop-filter: blur(10px);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
              background: rgba(255, 255, 255, 0.2);
              transform: translateY(-1px);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }
          }

          .user-dropdown {
            .user-info {
              display: flex;
              align-items: center;
              gap: 12px;
              cursor: pointer;
              padding: 10px 18px;
              border-radius: 25px;
              background: rgba(255, 255, 255, 0.1);
              border: 1px solid rgba(255, 255, 255, 0.2);
              backdrop-filter: blur(10px);
              transition: all 0.3s ease;
              min-height: 52px;

              &:hover {
                background: rgba(255, 255, 255, 0.2);
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              }

              .user-avatar {
                border: 2px solid rgba(255, 255, 255, 0.3);
                flex-shrink: 0;
              }

              .user-details {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 2px;
                min-width: 80px;

                .username {
                  font-size: 14px;
                  color: white;
                  font-weight: 600;
                  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
                  line-height: 1.2;
                  white-space: nowrap;
                }

                .user-role {
                  font-size: 11px;
                  color: rgba(255, 255, 255, 0.8);
                  line-height: 1.2;
                  white-space: nowrap;
                }
              }

              .dropdown-icon {
                color: rgba(255, 255, 255, 0.8);
                transition: transform 0.3s ease;
                flex-shrink: 0;
              }

              &:hover .dropdown-icon {
                transform: rotate(180deg);
              }
            }
          }
        }
      }
    }
  }

  .admin-main {
    flex: 1;
    overflow: hidden;

    .admin-sidebar {
      background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
      border-right: 1px solid #2d3748;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(180deg, transparent, #4a5568, transparent);
      }

      .sidebar-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 24px 0;

        .menu-header {
          padding: 0 24px 24px;
          border-bottom: 1px solid #4a5568;
          margin-bottom: 24px;

          .menu-title {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #e2e8f0;
            font-size: 16px;
            font-weight: 600;

            .el-icon {
              font-size: 20px;
              color: #667eea;
            }
          }
        }

        .menu-section {
          flex: 1;
          padding: 0 16px;

          .admin-menu {
            border-right: none;
            background: transparent;

            .menu-item {
              margin-bottom: 8px;
              border-radius: 12px;
              overflow: hidden;
              position: relative;

              &:hover {
                background: rgba(102, 126, 234, 0.1) !important;
              }

              &.is-active {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;

                .menu-item-content {
                  .menu-text {
                    color: white !important;
                  }

                  .menu-icon {
                    color: white !important;
                  }

                  .menu-indicator {
                    opacity: 1;
                  }
                }
              }

              .menu-item-content {
                display: flex;
                align-items: center;
                gap: 16px;
                padding: 12px 20px;
                position: relative;
                cursor: pointer;
                user-select: none;

                .menu-icon {
                  width: 36px;
                  height: 36px;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 18px;
                  transition: all 0.3s ease;

                  &.dashboard {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: white;
                  }

                  &.reports {
                    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
                    color: white;
                  }

                  &.posts {
                    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
                    color: #2d3748;
                  }

                  &.users {
                    background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
                    color: #2d3748;
                  }

                  &.categories {
                    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
                    color: #2d3748;
                  }
                }

                .menu-text {
                  flex: 1;
                  font-size: 14px;
                  font-weight: 500;
                  color: #e2e8f0;
                  transition: all 0.3s ease;
                }

                .menu-badge {
                  z-index: 2;
                }

                .menu-indicator {
                  position: absolute;
                  right: 20px;
                  top: 50%;
                  transform: translateY(-50%);
                  width: 4px;
                  height: 20px;
                  background: white;
                  border-radius: 2px;
                  opacity: 0;
                  transition: all 0.3s ease;
                }
              }
            }
          }
        }

        .sidebar-footer {
          padding: 24px;
          border-top: 1px solid #4a5568;
          margin-top: auto;

          .system-info {
            .info-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 8px 0;

              .info-label {
                font-size: 12px;
                color: #a0aec0;
              }

              .info-value {
                font-size: 14px;
                font-weight: 600;
                color: #e2e8f0;
              }

              .info-status {
                font-size: 12px;
                padding: 2px 8px;
                border-radius: 10px;

                &.online {
                  background: rgba(72, 187, 120, 0.2);
                  color: #68d391;
                }
              }
            }
          }
        }
      }
    }

    .admin-content {
      background: #f7fafc;
      padding: 32px;
      overflow-y: auto;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
      }
    }
  }
}

// 覆盖Element Plus默认样式
:deep(.el-header) {
  height: 80px !important;
  line-height: 80px;
}

:deep(.el-aside) {
  height: calc(100vh - 80px);
}

:deep(.el-main) {
  height: calc(100vh - 80px);
  padding: 0;
}

:deep(.el-menu-item) {
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  height: auto !important;
  min-height: 48px !important;
  line-height: normal !important;
  cursor: pointer !important;
  user-select: none !important;

  &:hover {
    background: rgba(102, 126, 234, 0.1) !important;
  }

  &.is-active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;

    * {
      color: white !important;
    }
  }
}

:deep(.el-breadcrumb) {
  line-height: normal;
}

:deep(.el-breadcrumb__inner) {
  line-height: 1.5 !important;
}

:deep(.user-dropdown-menu) {
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  overflow: hidden;

  .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    transition: all 0.3s ease;

    &:hover {
      background: #f7fafc;
    }

    &.logout:hover {
      background: #fed7d7;
      color: #e53e3e;
    }

    .el-icon {
      font-size: 16px;
    }
  }
}

:deep(.el-divider--vertical) {
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
}
</style>
